<template>
  <!-- <app-page> -->
  <!-- <div class="111" style=""> -->
  <div class="main">
    <SellSearch v-if="!detailstore.state.matchdetail.show" />
    <DetailNav v-if="detailstore.state.matchdetail.show" />
    <div class="container">
      <Match :matchs="match.list" :loading="match.loading" v-if="!detailstore.state.matchdetail.show" />
      <DetailIndex v-if="detailstore.state.matchdetail.show" />
      <div class="main_order">
        <!-- <div class="order_list"> -->
        <!-- <UserVip /> -->
        <!-- </div> -->
        <CreateOrder />
      </div>
      
    </div>
    <NotifacIndex v-if="detailstore.state.matchdetail.show"  />
  </div>
  
  <!-- </div> -->

  <!-- </app-page> -->
</template>

<script setup>
import { http } from '@/utils/http'
import SellSearch from './SellSearch.vue'
import Match from './Match.vue'
import CreateOrder from './create-order/CreateOrder.vue'
import UserVip from "./UserVip.vue";
import DetailIndex from "./detail/index.vue";
import DetailNav from "./detail/components/Nav.vue";
import NotifacIndex from "./notifac/index.vue";

import { useSellStore } from './sell-store.js'
import { detailSellStore } from './detail-store.js'
import { onMounted } from 'vue'

const store = useSellStore()
const detailstore = detailSellStore()
const { match } = store.state
const platformObj = reactive({})
const platforms = ref([])
const userStore = useUserStore()
provide('Sell', {
  store,
  state: store.state,
  match,
})
provide('detailSell', {
  detailstore,
  detailstate: detailstore.state
})
provide('/board', {
  platforms,
  platformObj,
})

onMounted(() => {
  // http.get('/config/get_bc_type', { params: { page: 1, page_size: 999 } }).then(res => {
  //   platforms.value = res.data.out_platform.map(item => {
  //     platformObj[item.bc_type] = item
  //     return { value: item.bc_type, label: item.name }
  //   })
  // })
  platforms.value = userStore.user.subscribe[`${userStore.user.plant_code}:data_api`].selected.map(item => {
    platformObj[item.value] = item
    return { value: item.value, label: item.name }
  })

  store.state.permissionBctypes = platforms.value

})
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  background: #fff;
  padding: 16px;
}

.container {
  display: flex;
  height: calc(100% - 50px);
  overflow: hidden;
}

.main_order {
  display: flex;
  flex-direction: column;
}

.order_list {
  width: 100%;
  height: 240px;
  padding-left: 16px;

}
</style>